<template>
	<div class="main-context">
		<el-steps :active="elStep" class="steps" finish-status="success" simple>
			<el-step title="选择商品"></el-step>
			<el-step title="选择商家"></el-step>
		</el-steps>
		<div v-show="elStep === 1" class="el-container">
			<el-container>
				<!--类目树-->
				<el-aside
					style="width: 350px"
					class="el-aside-superior"
					v-loading="loading"
					element-loading-text="拼命加载中"
					element-loading-spinner="el-icon-loading"
					element-loading-background="rgba(0, 0, 0, 0.8)"
				>
					<div class="tree-title">类目树管理</div>
					<el-tree
						ref="elTree"
						:data="categoryData"
						:default-expand-all="true"
						:highlight-current="true"
						:props="defaultProps"
						:expand-on-click-node="false"
						node-key="id"
						@node-click="handleNodeClick"
						show-checkbox
					></el-tree>
				</el-aside>
				<!--商品主列表-->
				<el-container class="two-container">
					<!--工具栏-->
					<el-header class="header">
						<div class="header-tool">
							<el-form :inline="true" :model="filters" :size="size" ref="filters">
								<el-row class="search-input">
									<el-form-item label="商品名称：">
										<el-input v-model="filters.chineseName" placeholder="商品名称" clearable></el-input>
									</el-form-item>
								</el-row>
								<el-row class="search-button noBoder">
									<el-form-item>
									<kt-button
										icon="fa fa-search"
										:label="$t('action.search')"
										type="primary"
										@click="findPage()"
									/>
								</el-form-item>
								<el-form-item>
									<kt-button
										icon="fa fa-refresh"
										:label="$t('action.reset')"
										type="primary"
										@click="resetForm()"
									/>
								</el-form-item>
								</el-row>
							</el-form>
						</div>
					</el-header>
					<!--表格内容栏-->
					<el-main class="main">
						<cy-table
							:size="size"
							:highlightCurrentRow="true"
							:content="pageResult"
							:columns="filterColumns"
							:totalSize="totalSize"
							:showBatchDelete="false"
							:showDeleteOperation="false"
							:showEditOperation="false"
							:showDetailOperation="false"
							:showOperation="false"
							@findPage="findPage"
							@selectionChange="selectionChange"
							ref="CyTable"
						></cy-table>
						<!--下一步-->
						<el-button type="primary" icon="el-icon-right" @click="nextStep" style="float: left;">下一步</el-button>
					</el-main>
				</el-container>
			</el-container>
		</div>
		<div v-show="elStep === 2" style="margin: 20px">
			<!--商家分页-->
			<el-row>
				<el-form :inline="true" :model="filters1" :size="size" ref="filters">
					<el-form-item>
						<el-input v-model="filters1.userName" placeholder="商家名称" clearable></el-input>
					</el-form-item>
					<el-form-item>
						<kt-button
							icon="fa fa-search"
							:label="$t('action.search')"
							type="primary"
							@click="findMerchant()"
						/>
					</el-form-item>
					<el-form-item>
						<kt-button
							icon="fa fa-refresh"
							:label="$t('action.reset')"
							type="primary"
							@click="resetMerchant()"
						/>
					</el-form-item>
				</el-form>
				<!--表格内容栏-->
				<el-table
					:data="pageResult1"
					:size="size"
					:stripe="true"
					style="width: 100%"
					v-loading="loading1"
					element-loading-text="拼命加载中"
					element-loading-spinner="el-icon-loading"
					element-loading-background="rgba(0, 0, 0, 0.8)"
					@selection-change="handleSelectionChangeMerchant"
					:header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
				>
					<el-table-column type="selection" align="center" width="55"></el-table-column>
					<el-table-column prop="userName" label="商家名称" sortable></el-table-column>
					<el-table-column prop="orgNumber" label="商家编码" sortable></el-table-column>
					<el-table-column prop="merchantType" label="商家类型" :formatter="typeFormatter" sortable></el-table-column>
					<el-table-column prop="status" label="商家状态" :formatter="statusFormatter" sortable></el-table-column>
					<el-table-column prop="createTime" label="注册时间" sortable></el-table-column>
				</el-table>
				<!--分页栏-->
				<div class="toolbar" style="padding:10px;">
					<el-pagination
						layout="total, prev, pager, next, jumper,sizes"
						@current-change="refreshPageRequest"
						@size-change="handleSizeChange"
						:current-page="pageRequest1.pageNum"
						:page-size="pageRequest1.pageSize"
						:total="totalSize1"
						style="float:right;"
						:page-sizes="[10, 50, 100, 150]"
					></el-pagination>
				</div>
			</el-row>
			<!--分配-->
			<el-row>
				<el-button
					type="primary"
					icon="el-icon-back"
					@click="previousStep"
					style="text-align: center"
				>上一步</el-button>
				<el-button
					type="primary"
					icon="el-icon-s-shop"
					@click="stepFinish"
					:disabled="selectMerchant.length === 0"
					style="text-align: center"
				>分配</el-button>
			</el-row>
		</div>
	</div>
</template>

<script>
import CyTable from "@/views/Core/ProductTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";

export default {
  components: {
    CyTable,
    KtButton
  },

  data() {
    return {
      loading: true,
      loading1: true,
      size: "small",
      elStep: 1,
      categoryData: [],
      defaultProps: {
        label: "name",
        children: "categoryList"
      },

      filters: {
        categoryId: "",
        chineseName: ""
      }, // 平台商品
      pageResult: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      totalSize: 0,
      filterColumns: [
        { prop: "id", label: "序号", minWidth: 80 },
        { prop: "pictureUrl", label: "主图", minWidth: 100, showImg: true },
        { prop: "chineseName", label: "商品名称", minWidth: 150 },
        { prop: "code", label: "商品编码", minWidth: 120 },
        { prop: "totalStock", label: "总库存", minWidth: 80 },
        { prop: "salePriceWithTax", label: "零售价", minWidth: 100 },
        { prop: "name", label: "商品品牌", minWidth: 120 },
        { prop: "fullNamePath", label: "商品类目", minWidth: 180 }
      ],

      selectProduct: [], // 所选商品
      selectMerchant: [], // 所选商家
      selectCategory: [], // 所选类目

      filters1: {
        userName: null
      },
      pageResult1: [], // 选择商家
      pageRequest1: { pageNum: 1, pageSize: 10 },
      totalSize1: 0
    };
  },

  mounted() {
    this.queryBehindCategory();
  },

  methods: {
    // 查询当前用户所有类目
    queryProductByCategoryId: function() {
      let params = {};
      let this_ = this;
      this_.utils.request.queryProductByCategoryId(params, function(data) {
        this_.loading = false;
        this_.categoryData = data.data;
      });
    },

    // 查询当前用户所有类目
    queryBehindCategory: function() {
      let params = {};
      let this_ = this;
      this_.utils.request.queryBehindCategory(params, function(data) {
        this_.loading = false;
        this_.categoryData = data.data;
      });
    },

    // 类目点击事件
    handleNodeClick(val) {
      this.filters = {};
      this.filters.categoryId = val.id;
      this.findPage();
    },

    // 查询当前类目所有商品
    findPage: function(params) {
      let this_ = this;
      if (this_.filters.categoryId != null && this_.filters.categoryId !== "") {
        if (params == undefined || params == null) {
          params = {
            pageNum: this_.pageRequest.pageNum,
            pageSize: this_.pageRequest.pageSize
          };
        }
        if (this_.filters == undefined || this_.filters == null) {
          this_.filters = {};
        }
        this_.filters.start = params.pageNum;
        this_.filters.limit = params.pageSize;
        this.utils.request.queryProductByCategoryId(this_.filters, function(
          res
        ) {
          if (res.code == "0000") {
            this_.pageResult = res.data.rows;
            this_.totalSize = Number(res.data.total);
          } else {
            this_.$message({ message: "操作失败, " + res.msg, type: "error" });
          }
        });
      }
    },

    // 查询商家
    findMerchant() {
      let this_ = this;
      this_.filters1.start = this_.pageRequest.pageNum;
      this_.filters1.limit = this_.pageRequest.pageSize;
      this_.utils.request.queryMerchantList(this_.filters1, function(res) {
        if (res.code == "0000") {
          this_.loading1 = false;
          this_.pageResult1 = res.data.rows;
          this_.totalSize1 = Number(res.data.total);
        }
      });
    },

    // 所选平台的商品
    selectionChange(val) {
      this.selectProduct = val.selections;
    },

    // 所选商家
    handleSelectionChangeMerchant(val) {
      this.selectMerchant = val;
    },

    // 重置商品
    resetForm() {
      this.filters.chineseName = "";
      this.findPage();
    },

    // 重置商家
    resetMerchant() {
      this.filters1 = {
        userName: null
      };
      this.findMerchant();
    },

    // 下一步
    nextStep() {
      let this_ = this;
      this_.selectCategory = this_.$refs.elTree.getCheckedNodes(true, false);
      if (this_.selectProduct.length > 0 || this_.selectCategory.length > 0) {
        this_.elStep = 2;
        this_.findMerchant();
      } else {
        this_.$message({
          message: "请先勾选要分配的商品或者类目",
          type: "error"
        });
      }
    },

    // 上一步
    previousStep() {
      this.elStep = 1;
    },

    // 分配
    stepFinish() {
      let this_ = this;
      if (this_.selectMerchant.length === 0) {
        return this_.$message({ message: "请先勾选商家", type: "error" });
      }
      let categoryIds = []; // 所选类目
      let productIds = []; // 所选商品
      let merchantRequestList = []; // 所选商家
      this_.selectCategory.forEach(item => {
        categoryIds.push(item.id);
      });
      this_.selectProduct.forEach(item => {
        productIds.push(item.id);
      });
      this_.selectMerchant.forEach(item => {
        merchantRequestList.push({ id: item.id, userName: item.userName });
      });
      let params = {};
      params.categoryIds = categoryIds;
      params.productIds = productIds;
      params.merchantRequestList = merchantRequestList;
      this_.utils.request.batchPlatformProduct(params, function(res) {
        if (res.code == "0000") {
          this_.pageResult = [];
          this_.totalSize = 0;
          this_.pageResult1 = [];
          this_.totalSize1 = 0;
          this_.selectProduct = [];
          this_.selectCategory = [];
          this_.elStep = 1;
          this_.$message({ message: "操作成功", type: "success" });
        } else {
          this_.$message({ message: "操作失败", type: "error" });
        }
      });
    },

    // 商家类型转化
    typeFormatter: function(row, column, cellValue) {
      if (cellValue == 1) {
        return "自营";
      } else if (cellValue == 2) {
        return "第三方商户";
      }
    },

    // 商家状态转化
    statusFormatter: function(row, column, cellValue) {
      if (cellValue == 1) {
        return "待审核";
      } else if (cellValue == 2) {
        return "审核通过";
      } else {
        return "审核拒绝";
      }
    },

    // 每页数据刷新
    refreshPageRequest: function(pageNum) {
      this.pageRequest.pageNum = pageNum;
      this.findMerchant();
    },

    // 每页条数刷新
    handleSizeChange: function(pageSize) {
      this.pageRequest.pageSize = pageSize;
      this.findMerchant();
    }
  }
};
</script>

<style scoped lang="scss">
.main-context {
  width: 100%;
  height: 100%;
}

.steps {
  height: 25px;
}

.tree-title {
  font-size: 18px;
  color: #666666;
  text-align: center;
  margin-bottom: 10px;
  line-height: 60px;
  border-bottom: 2px solid #dcdfe6;
}

.el-aside-superior {
  height: 760px;
  margin: 5px 20px 0 20px;
  background: #fff;
  border: 1px solid #dcdfe6;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
    0 0 6px 0 rgba(0, 0, 0, 0.04);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
  position: relative;
}

.two-container {
  .header {
    // margin-top: 5px;
    height: 175px !important;
    border: 1px solid #dcdfe6;

    .header-tool {
      margin-top: 10px;
    }
  }

  .main {
    height: 700px;
    border: 1px solid #dcdfe6;
  }
}
.noBoder{
    border-bottom: none !important;
  }
</style>
